<template>
  <view class="container">
    <u-toast ref="uToastRef"></u-toast>
    <view class="address-item" @tap="showAddress = true">
      <view class="address">{{ address.address }}</view>
      <view class="contacts">{{ address.name + ' ' + address.phone }}</view>
    </view>
    <view class="goods-list">
      <shop-goods-list :goods-list="goodsList"></shop-goods-list>
    </view>
    <view class="submit-item">
      <view class="total-money">
        ￥{{ totalPrice }}
      </view>
      <view>
        <u-button text="提交订单" type="error" @click="show = true"></u-button>
      </view>
    </view>
    <u-modal
        :show="show"
        title="确认支付"
        :show-cancel-button="true"
        content='请确认订单，点击确认即可下单'
        :asyncClose="true"
        @close="show = false"
        @cancel="show = false"
        @confirm="submit"
    ></u-modal>
    <u-popup :round="10" :show="showAddress" @close="showAddress = false" @open="showAddress = true">
      <view>
        <view
            v-for="(address,index) in addressList"
            :key="index"
            class="address-select"
        >
          <view class="address">{{ address.address }}</view>
          <view class="people">
            <view class="name">{{ address.name }}</view>
            <view class="phone">{{ address.phone }}</view>
            <view v-if="address.isDefault" class="tag">
              <u-tag size="mini" text="默认" type="error"></u-tag>
            </view>
          </view>
          <view class="select">
            <u-button size="44" text="选择" type="error" @click="selectAddress(address)"></u-button>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script lang="ts" setup>
import {onLoad, onShow} from "@dcloudio/uni-app";
import {computed, ref} from "vue";
import type {Goods} from "@/interfaces/goods";
import {useDelCartApi, useDoPayApi, useGetUserAddressApi} from "@/services/api";
import {AddressInfo} from "@/interfaces/user";
import {useStore} from "vuex";
import type {DoPayReqVO, GoodsIds} from "@/interfaces/order";
import type {CartGoods} from "@/interfaces/cart";

const uToastRef = ref()
const store = useStore()
const addressList = ref<AddressInfo[]>([])
const address = ref<AddressInfo>({
  address: "",
  isDefault: 0,
  name: "",
  phone: ""
})
const show = ref<boolean>(false)
const showAddress = ref<boolean>(false)
const goodsList = ref<Goods[] | CartGoods[]>([])
const totalPrice = computed(() => goodsList.value.reduce((prev, cur) => prev + parseFloat(cur.price + ''), 0))
const submit = async () => {
  const data: DoPayReqVO = {
    userId: store.getters["auth/getUserId"],
    addressId: address.value.id || 0,
    goodsIds: goodsList.value.map((value: Goods): GoodsIds => {
      return {goodsId: value.id, goodsNum: 1}
    })
  }
  await useDoPayApi(data)
  if (goodsList.value[0].cartId) {
    for (let i = 0; i < goodsList.value.length; i++) {
      await useDelCartApi({id: goodsList.value[i].cartId})
    }
  }
  uToastRef.value.show({
    message: '支付成功',
    type: 'success',
    complete: () => {
      uni.switchTab({
        url: '/pages/mine/index'
      })
    }
  })
}
const selectAddress = (item: AddressInfo) => {
  address.value = item
  showAddress.value = false
}
const init = async () => {
  const {data: res} = await useGetUserAddressApi({userId: store.getters["auth/getUserId"]})
  addressList.value = res.addressList
  address.value = res.addressList.filter((value: AddressInfo) => value.id == res.defaultId)[0]
}
onShow(() => {
  init()
})
onLoad((query) => {
  init()
  console.log(JSON.parse(query?.data))
  if (query?.data) goodsList.value = JSON.parse(query?.data)
})

</script>


<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-color: #edf2fd;
  display: flex;
  flex-direction: column;
  gap: 12px;

  .address-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 0 0 24px 24px;
    background-color: #ffffff;
    padding: 12px 24px;
  }


  .goods-list {

  }

  .submit-item {
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    view {
      padding: 24px;
    }

    .total-money {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: #dd524d;
    }
  }

  .address-select {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;

    position: relative;

    .region {
      font-size: 12px;
      color: #999999;
    }

    .address {
      font-size: 16px;
    }

    .people {
      display: flex;
      flex-direction: row;
      gap: 8px;
      font-size: 12px;

      .name {
        color: #000000;
      }

      .phone {
        color: #999999;
      }
    }

    .select {
      position: absolute;
      top: calc(50% - 22rpx);
      right: 12px;
    }
  }
}
</style>
